<template>
    <div class="organization-container">
        <div class="content-box">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple"><OrganizationTree  @nodeClick="(id)=>{organizationId=id}"/></div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content ep-bg-purple"><UserRole :organizationId="organizationId"/></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import OrganizationTree from "./components/OrganizationTree.vue";
import UserRole from "./components/UserRole.vue";
import { reactive, ref, watch } from 'vue'

defineOptions({
  name: "Organization",
});
const organizationId = ref('');
</script>

<style lang="scss" scoped>
.organization-container {
  padding: 20px;

  .content-box {
    .grid-content {
      // border-radius: 4px;
      min-height: 36px;
      background-color: #fff;
    }

    // display: flex;
    // justify-content: space-between;
    // .left {
    //   width: 48%;
    //   height: 200px;
    //   background-color: #fff;
    // }
    // .right {
    //   width: 48%;
    //   height: 200px;
    //   background-color: #fff;
    // }
  }
}
</style>
